<template>
  <div class="page">

    <!-- 顶部搜索、定位 开始 -->
    <div class="top_info" v-if="(active != 4)">
      <div class="location" @click="chooseAddress">
        <span class="city_name">{{ showCity() }}</span>
        <van-icon name="arrow-down" class="arrow" />
      </div>
      <div class="search">
        <van-search v-model="term" class="van_search" shape="round" placeholder="牙齿矫正哪里好" readonly @click.native="onSearch" />
        <!-- <img src="@/assets/images/search.png" alt="">
              <span title="牙齿矫正哪里好">牙齿矫正哪里好</span> -->
      </div>
      <div class="msg" @click="goService">
        <img src="@/assets/images/msg_hot.png" alt="">
      </div>
    </div>
    <!-- 顶部搜索、定位 end -->
    <!-- <div>{{ gpsInfo.latitude +','+ gpsInfo.longitude}}</div> -->

    <router-view :key="$route.fullPath" />

    <van-tabbar v-model="active" route :safe-area-inset-bottom="true">
      <van-tabbar-item replace :to="getPath('/home')" class="van_tabbar_item">
        <span :class="active == 0 ? 'van_item_span' : ''">首页</span>
        <template slot="icon">
          <img src="@/assets/images/tabbar_home_active.png" alt="" v-if="active == 0" />
          <img src="@/assets/images/tabbar_home_normal.png" alt="" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace :to="getPath('/hospital')" class="van_tabbar_item">
        <span :class="active == 1 ? 'van_item_span' : ''">医院</span>
        <template slot="icon">
          <img src="@/assets/images/tabbar_hospital_active.png" alt="" v-if="active == 1" />
          <img src="@/assets/images/tabbar_hospital_normal.png" alt="" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace :to="getPath('/doctor')" class="van_tabbar_item">
        <span :class="active == 2 ? 'van_item_span' : ''">医生</span>
        <template slot="icon">
          <img src="@/assets/images/tabbar_doctor_active.png" alt="" v-if="active == 2" />
          <img src="@/assets/images/tabbar_doctor_normal.png" alt="" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace :to="getPath('/shop')" class="van_tabbar_item">
        <span :class="active == 3 ? 'van_item_span' : ''">商城</span>
        <template slot="icon">
          <img src="@/assets/images/tabbar_shop_active.png" alt="" v-if="active == 3" />
          <img src="@/assets/images/tabbar_shop_normal.png" alt="" v-else />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace :to="getPath('/my')" class="van_tabbar_item">
        <span :class="active == 4 ? 'van_item_span' : ''">我的</span>
        <template slot="icon">
          <img src="@/assets/images/tabbar_my_active.png" alt="" v-if="active == 4" />
          <img src="@/assets/images/tabbar_my_normal.png" alt="" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>

</div>
</template>

<script>
import { Tabbar, TabbarItem, Search } from "vant";
import { GET_SERVICE_PATH } from "@/http/interface";
import { MAP_KEYS } from "@/utils/constants";
export default {
  name: "IndexPage",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Search.name]: Search
  },
  data() {
    return {
      loading: true,
      active: 0,
      city: "",
      cityInfo: {},
      term: '',
      gpsInfo: {}
    };
  },
  watch: {
    $route: {
      handler: function (n) {
        let path = n.path;
        let _types = {
          "/hospital": 1,
          "/doctor": 2,
          "/shop": 3,
          "/my": 4,
        };
        this.active = _types[path] || 0;
      },
      immediate: true,
    },
    gpsInfo: {
      handler: function (n) {
        console.log(n)
        this.gpsInfo = n
      },
      immediate: true
    }
  },
  async asyncData({ query, $axios, $cookies }) {
    let city = $cookies.get('city')
    let params = {};
    params.key = MAP_KEYS;
    console.log(city)
    if (!city) {
      let res = await $axios.get("https://restapi.amap.com/v3/ip?parameters", {
        params: params,
      });
      let o = res || {}
      let code = o.adcode ? o.adcode.slice(0, 4) : ''
      if(o.city.length){
        $cookies.set('city', o.city)
        $cookies.set('cityCode', code)
      }
      return {
        cityInfo: o,
      };
    } else {
      return {}
    }
  },
  created() {

  },
  mounted() {
    let _this = this;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(_this.setPosition);
    }
  },
  middleware({ route, redirect, req }) {
    if (route.path == "/") {
      redirect("/home");
    }
  },
  methods: {
    lookNews(id) {
      this.$router.push({ path: `/news/${id}` });
    },

    // 选择城市
    chooseAddress() {
      let query = this.$route.query;
      this.$router.push({
        path: "/city/list",
        query: query,
      });
    },

    // 获取地址
    getPath(url) {
      let query = this.$route.query;
      if (query.city) {
        url = `${url}?city=${query.city}&code=${query.code}`;
      }
      return url;
    },

    // 在线客服
    goService() {
      window.location.href = GET_SERVICE_PATH;
    },

    // 展示城市
    showCity() {
      let query = this.$route.query;
      let o = this.$cookies.get('city')
      if (query.city) {
        return query.city
      }

      if (o&&o.length) {
        return o
      }
      return '全国';
    },

    // 搜索
    onSearch() {
      let num = Number(this.active)
      let id = num > 0 ? num - 1 : 0
      this.$router.push({
        path: '/search',
        query: { type: id }
      })
    },

    // 设置gps信息
    setPosition(position) {
      console.log(position)
      let coords = position.coords || {}
      if (coords.longitude) {
        let o = {}
        o.lng = coords.longitude
        o.lat = coords.latitude
        console.log(o)
        this.$cookies.set('GPS', o)
      }
    }

  },
};
</script>
<style lang="less" scoped>@import "/assets/styles/index.less";</style>
